<template>
  <div>
    <div>
      <div class="handle-box">
        <el-button type="primary" @click="handleEdit">新增标签</el-button>
      </div>
      <el-table :data="tabDate" border class="table" header-cell-class-name="table-header">
        <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>

        <el-table-column prop="labelName" label="标签名称" align="center"></el-table-column>
        <el-table-column prop="labelDescription" label="标签描述" align="center"></el-table-column>

        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="handleDelete(scope.row)">
              编辑
            </el-button>
            <el-button type="text" icon="el-icon-delete" style="color: var(--orangeRed)" @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--编辑弹出框-->
    <edit_dialog :visible="editPopDialog.visible" :data="editPopDialog.form"  @close="handEditClose"/>
  </div>
</template>

<script>
import edit_dialog from '@/views/after/label/edit.vue';

export default {
  components: { edit_dialog },
  data() {
    return {
      // 新增编辑弹窗
      editPopDialog: {
        visible: false,
        title: '编辑标签',
        data: {
          id: null,
        }
      },
      pagination: {
        current: 1,
        size: 10,
        total: 0,
        status: null
      },
      tabDate: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getLoves();
  },
  mounted() {},
  methods: {
    handleDelete(item) {
      this.$confirm('确认删除资源？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
        center: true
      }).then(() => {
        this.$http.get(this.$constant.baseURL + "/family/deleteFamily", {id: item.id}, true)
          .then((res) => {
            this.pagination.current = 1;
            this.getLoves();
            this.$message({
              message: "删除成功！",
              type: "success"
            });
          })
          .catch((error) => {
            this.$message({
              message: error.message,
              type: "error"
            });
          });
      }).catch(() => {
        this.$message({
          type: 'success',
          message: '已取消删除!'
        });
      });
    },
    getLoves() {
      this.$http.get(this.$constant.baseURL + "/webInfo/listLabel")
        .then((res) => {
          if (!this.$common.isEmpty(res.data)) {
            this.tabDate = res.data;
          }
        })
        .catch((error) => {
          this.$message({
            message: error.message,
            type: "error"
          });
        });
    },
    handleEdit() {
      this.editPopDialog.visible = true
    },
    handEditClose() {
      this.editPopDialog.visible = false;
      this.getLoves();
    }
  }
}
</script>

<style scoped>

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 200px;
}

.table {
  width: 100%;
  font-size: 14px;
}

.mrb10 {
  margin-right: 10px;
  margin-bottom: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}

.pagination {
  margin: 20px 0;
  text-align: right;
}

.el-switch {
  margin: 5px;
}
</style>
